<%--
  Created by IntelliJ IDEA.
  User: Vadim
  Date: 7/3/14
  Time: 8:54 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="../content/style/style.css">

    <link href='../content/scripts/calendar/fullcalendar.css' rel='stylesheet' />
    <link href='../content/scripts/calendar/fullcalendar.print.css' rel='stylesheet' media='print' />
    <link rel="stylesheet" type="text/css" href="../content/scripts/datetimepicker/DateTimePicker.css" />

    <script src='../content/scripts/moment.min.js'></script>
    <script src='../content/scripts/jquery.min.js'></script>
    <script src='../content/scripts/calendar/fullcalendar.min.js'></script>
    <script src='../content/scripts/calendar/lang-all.js'></script>
    <script type="text/javascript" src="../content/scripts/datetimepicker/DateTimePicker.js"></script>

    <link href="../content/scripts/jquery-ui-1.11.0/jquery-ui.css" rel="stylesheet">
    <script src="../content/scripts/jquery-ui-1.11.0/jquery-ui.min.js"></script>

    <link rel="stylesheet" href="../content/scripts/bootstrap-3.0.0.min.css">
    <link rel="stylesheet" href="../content/scripts/pick-a-color-master/css/pick-a-color-1.2.3.min.css">
    <script src="../content/scripts/tinycolor-0.9.15.min.js"></script>
    <script src="../content/scripts/pick-a-color-master/js/pick-a-color-1.2.3.min.js"></script>

    <script src="../content/scripts/ckeditor/ckeditor.js"></script>

    <script>
        $(document).ready(function() {

            $('input[name=is_public]').prop('checked', ${is_public});
            $('input[name=is_public]').val(${is_public});
            $('input[name=notify_me]').prop('checked', ${notify_me});
            $('input[name=notify_me]').val(${notify_me});

            $(".pick-a-color").pickAColor({
                showSpectrum            : true,
                showSavedColors         : true,
                saveColorsPerElement    : true,
                fadeMenuToggle          : true,
                showAdvanced			: true,
                showBasicColors         : true,
                showHexInput            : true,
                allowBlank				: true,
                inlineDropdown			: true
            });

            $("#dtBox").DateTimePicker({

                isPopup: false,
                dateTimeFormat: "dd-MM-yyyy HH:mm:ss"

            });

            $('#calendar').fullCalendar({
                lang: 'ru',
                theme: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                editable: false,
                timeFormat: 'H(:mm)',
                events: [
                    <c:forEach var="item" items="${events}" varStatus="loop">
                        {
                            id: '${item.id}',
                            title: '${item.title}',
                            start: '${item.event_start_date}',
                            end: '${item.event_end_date}',
                            color: '${item.color}',
                            editable: true
                        }<c:if test="${!loop.last}">,</c:if>
                    </c:forEach>
                ],
                eventClick: function(calEvent, jsEvent, view) {
                    console.log("id:" + calEvent.id);
                    location.href = "/securepages/calendar_editor.do?showEventId=" + calEvent.id;
                },
                eventDrop: function(event, delta, revertFunc) {

                    console.log(event.title + " was dropped on " + event.start.format() + " end: " + event.end.format());

                    if (!confirm("Are you sure about this change?")) {
                        revertFunc();
                    } else {

                        $.ajax({
                            type: "post",
                            url: '/securepages/calendar_editor.do',
                            data: {
                                event_id: event.id,
                                start_date: event.start.format(),
                                end_date: event.end.format()
                            },
                            success: function (result) {
                                if(result.error){
                                    alert("Dragged with errors:" + result.error);
                                } else {
                                    console.log(result.message);
                                }
                            },
                            error: function (result) {
                                alert("error happen");
                            }
                        });
                    }

                }
            });

        });

        function getDateStringFromDate(date){
            var time = new Date(date),
                    d = time.getDate(),
                    month = time.getMonth()+1,
                    y = time.getFullYear(),
                    h = time.getUTCHours(), // 0-24 format
                    m = time.getUTCMinutes()
                    ;

            return d + '-' + month + '-' + y + ' ' + h + ':' + m;
        }

        function resetForm($form) {
            $form.find('input:text, input:password, input:file, select, textarea').val('');
            $form.find('input:radio, input:checkbox')
                    .removeAttr('checked').removeAttr('selected');
        }

        function updateCheckBox(ch){
            $('input[name=is_public]').prop('checked', ch.checked);
            $('input[name=is_public]').val(ch.checked);
        }

        function updateNotifyCheckBox(ch){
            $('input[name=notify_me]').prop('checked', ch.checked);
            $('input[name=notify_me]').val(ch.checked);
        }

        function deleteCalendarById(event){
            if (confirm('Are you sure you want to delete event "' + eventTitle + '"?')) {
                $.ajax({
                    type: "post",
                    url: '/securepages/calendar_deleter.do',
                    data: {
                        eventId: eventId
                    },
                    success: function (result) {
                        if(result.error){
                            alert("deleted with errors:" + result.error);
                        } else {
                            console.log(result.message);
                            window.location = "/securepages/calendar_creator.do";
                        }
                    },
                    error: function (result) {
                        alert("error happen");
                    }
                });
            }
        }
    </script>

    <style>

        body {
            margin: 0;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            width: 900px;
            margin: 40px auto;
        }

    </style>

</head>
<body>
<div id="container">
    <div id="header">
        <jsp:include page="/publicpages/common/header.jsp"/>
    </div>
    <div id="body">

        <form id="calendar_form" action="/securepages/calendar_creator.do" method="post">
            <input type="hidden" name="event_id" value="${event_id}"/>
            <table style="margin-left:50px;margin-right: 50px;margin-bottom: 50px;margin-top: 50px;width:92%">
                <colgroup>
                    <col span="1" style="width: 20%;">
                    <col span="1" style="width: 60%;">
                </colgroup>
                <tr>

                        <td rowspan="3" style="vertical-align: top;padding-top: 50px;padding-right: 20px;">
                            <hr/>
                            <div>
                                Actions:
                            </div>
                            <div>
                                <a href="/securepages/calendar_creator.do">Create New Event</a>
                            </div>
                            <c:if test="${not empty event_id}">
                                <c:if test="${event_id ne '0'}">
                                    <div>
                                        <a href="javascript:void(0);" onclick="deleteCalendarById(${event_id}, '${event_title}')">Delete Current Event</a>
                                    </div>
                                    <div>
                                        <a href="/publicpages/calendar_viewer.do" >View Events</a>
                                    </div>
                                </c:if>
                            </c:if>
                            <hr/>
                            <div class="elementPair" style="margin-top: 40px;">
                                <span>Event Title:</span>
                                <input type="text" name="event_title" value="${event_title}" class="form-control"/>
                            </div>
                            <div class="elementPair">
                                <c:if test="${not empty is_public}">
                                    <c:if test="${is_public}">
                                        <input type="checkbox" name="is_public" value="${is_public}" onclick="javascript:updateCheckBox(this);" checked/>
                                    </c:if>
                                    <c:if test="${not is_public}">
                                        <input type="checkbox" name="is_public" value="false" onclick="javascript:updateCheckBox(this);"/>
                                    </c:if>
                                </c:if>
                                <c:if test="${empty is_public}">
                                    <input type="checkbox" name="is_public" value="false" onclick="javascript:updateCheckBox(this);"/>
                                </c:if>
                                <span>Is Public</span>
                            </div>
                            <div class="elementPair">
                                <c:if test="${not empty notify_me}">
                                    <c:if test="${notify_me}">
                                        <input type="checkbox" name="notify_me" value="${notify_me}" onclick="javascript:updateNotifyCheckBox(this);" checked/>
                                    </c:if>
                                    <c:if test="${not notify_me}">
                                        <input type="checkbox" name="notify_me" value="false" onclick="javascript:updateNotifyCheckBox(this);"/>
                                    </c:if>
                                </c:if>
                                <c:if test="${empty notify_me}">
                                    <input type="checkbox" name="notify_me" value="false" onclick="javascript:updateNotifyCheckBox(this);"/>
                                </c:if>
                                <span>Enable Notification</span>
                            </div>
                            <div class="elementPair">
                                <span>Notify Me On:</span>
                                <input class="notifyDateTime1 form-control" type="datetime" name="when_notify_me" value="${when_notify_me}" data-field="datetime" data-startend="end" data-startendelem=".startDateTime1" readonly/>
                            </div>
                            <div class="elementPair">
                                <span>Start Date:</span>
                                <input class="startDateTime1 form-control" type="datetime" name="start_date" value="${start_date}" data-field="datetime" data-startend="start" data-startendelem=".endDateTime1" readonly/>
                            </div>
                            <div class="elementPair">
                                <span>End Date:</span>
                                <input class="endDateTime1 form-control" type="datetime" name="end_date" value="${end_date}" data-field="datetime" data-startend="end" data-startendelem=".startDateTime1" readonly/>
                            </div>
                            <div class="elementPair">
                                <span>Color Picker:</span>
                                <div><input type="text" value="${event_color}" name="event_color" class="pick-a-color form-control"></div>
                            </div>
                            <div class="elementPair">
                                <span>Event Description:</span>
                                <div>
                                    <textarea name="event_description" id="event_description_text" rows="20" cols="80" style="height: 100%;">
                                        ${event_description}
                                    </textarea>
                                    <script>

                                        // instance, using default configuration.
                                        var contentEditor = CKEDITOR.replace( 'event_description_text',{
                                            filebrowserUploadUrl: '/securepages/upload.do',
                                            toolbar: [
                                                [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],
                                                [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat', 'Maximize' ] ,
                                                [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl', 'Link' ],
                                                [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ],
                                                [ 'Styles','Format','Font','FontSize' ]
                                            ]
                                        } );
                                    </script>
                                </div>
                            </div>
                            <div class="elementPair" style="float: right;">
                                <input type="button" value="Cancel" onclick="javascript:resetForm($('#calendar_form'));">
                                <input type="submit" value="Save"/>
                            </div>
                        </td>
                        <td>

                        </td>
                </tr>
                <tr>
                    <td>
                        <div id='calendar'></div>
                    </td>
                </tr>
                <tr>
                    <td>

                    </td>
                </tr>
            </table>
        </form>

        <div id="dtBox"></div>

    </div>
    <div id="footer">
        <jsp:include page="/publicpages/common/footer.jsp"/>
    </div>
</div>
</body>
</html>
